<template>
    <div class="outDiv">
        <div style="position: absolute;left: 2%;">
            <label @click="btnIndex()">
                < 返回 </label>
        </div>
        <div class="top">
            <div class="pointHead" :class="{ 'left': allPoint }" style="border-radius: 8px 0px 0px 8px;"
                @click="btnAllPoint()">总积分</div>
            <div class="pointHead" :class="{ 'right': yearPoint }" style="border-radius: 0px 8px 8px 0px;"
                @click="btnYearPoint()">年度积分</div>
        </div>
        <div class="middle">
            <div class="mLeft line list">
                <span>12345</span>
                <span>全省的排名</span>
            </div>
            <div class="mMiddle line list">
                <span>230</span>
                <span>服务总积分</span>
            </div>
            <div class="mRight list">
                <span>560</span>
                <span>本校本年度排名</span>
            </div>
        </div>
        <div class="bottom">
            <div class="bTop">
                <h4>本校本年级服务标兵</h4>
                <span>1200人参与排名</span>
            </div>
            <div class="bContent">
                <div class="listUser" v-for="(item, index) in point" :key="item.id" :class="{ 'userCheck': whoClick }">
                    <div class="Bleft">
                        <span>{{ index + 1 }}</span>
                        <span><img src="../imgs/myicon.png"></span>
                        <span>{{ item.name }}</span>
                    </div>
                    <div class="Bright">
                        <span>{{ item.point }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
// -- 定义变量-开始 --
var point = ref([])
let whoClick = ref(false)
let router = useRouter()
// -- 定义变量-结束 --
// == 页面初始化-开始 ==
// 积分初始化状态
let allPoint = ref(true)
let yearPoint = ref(false)
// 改变积分头部的部分
function btnAllPoint() {
    allPoint.value = true;
    yearPoint.value = false
}
function btnYearPoint() {
    allPoint.value = false
    yearPoint.value = true
}
// == 页面初始化-结束 ==

// == 动作函数-开始 ==
onMounted(() => {
    fetch('http://localhost:5000/point').then(
        res => {
            if (res.ok) {
                return res.json()
            }
        }
    ).then(data => {
        // 将数据库的值赋值给变量point
        point.value = data
    })

})
function btnIndex() {
    router.push('/index')
}
// == 动作函数-结束 ==
</script>
<style scoped>
label {
    width: 100%;
    font-size: 16px;
    color: #1b96f0;
}

.userCheck {
    background-color: #f0f8ff69;
    border-radius: 20px;
}

h4 {
    margin-left: 3%;
    font-size: 15px;
}

.outDiv {
    width: 100%;
    height: 812px;
    background-color: color(display-p3 0 0.97 1 / 0.12);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.line {
    border-right: 1px dashed gray;
}

.list {
    height: 50%;
    font-family: cursive;
    font-size: 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

.listUser {
    display: flex;
    align-items: center;
    width: 100%;
    height: 60px;
    justify-content: space-between;
    font-family: cursive;
}

.Bleft {
    display: flex;
    width: 40%;
    margin-left: 3%;
}

.Bleft span {
    height: 25px;
    margin: 2%;
}

.Bleft img {
    width: 25px;
}

.Bright {
    margin-right: 3%;
}

.bTop {
    width: 100%;
    height: 8%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px dashed;
}

.bTop span {
    font-size: 10px;
    letter-spacing: 1px;
    margin-right: 3%;
}

.mLeft {
    width: 31%;
}

.mMiddle {
    width: 32%;
}

.mRight {
    width: 34%;
}

.left {
    background-color: #87d3fd;
}

.right {
    background-color: #87d3fd;
}

.top {
    margin-top: 5%;
    border-radius: 8px;
    width: 90%;
    height: 5%;
    background-color: #fff;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.pointHead {
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    ;
}

.middle {
    margin-top: 4%;
    border-radius: 8px;
    width: 90%;
    height: 11%;
    background-color: #5af0fd5c;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.bottom {
    flex: 1;
    margin-top: 4%;
    border-radius: 8px;
    width: 90%;
    height: 11%;
    background-color: #fff;
    overflow: auto;
    /* background-color: #18efa747; */
    background-color: #5af0fd5c;

}
</style>